<template>
  <div>
    <el-card>
      <div slot="header">
        <div>
          <el-page-header @back="back" content="密码修改"> </el-page-header>
        </div>
      </div>
      <div>
        <el-form
          ref="form"
          :model="pwdForm"
          label-width="80px"
          class="changepwd-form"
          :rules="rules"
        >
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input v-model="pwdForm.oldPwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd1">
            <el-input v-model="pwdForm.newPwd1"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newPwd2">
            <el-input v-model="pwdForm.newPwd2"></el-input>
          </el-form-item>
          <el-form-item class="form-btn">
            <el-button type="primary" @click="changePwd">确定</el-button>
            <el-button @click="showChangePwd = false">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  methods:{
    changePwd(){
     let form = this.$refs.form
      form.validate((bool,obj)=>{
        if(bool){
          let data = {
            account:this.$store.state.account,
            oldpassword:this.pwdForm.oldPwd,
            newpassword:this.pwdForm.newPwd1
          }

          this.axios.put("http://47.99.124.245:8082/updateEnpassword",data).then(res=>{
            let code = res.data.code
            switch(code){
              case 200:
                this.$message.success('修改成功');
                break;
              default:
                this.$message.error('修改失败');

            }
           
            
          }).catch((err)=>{
         
            this.$message.error('修改失败');
          })
        }
    })
    },
    back(){
      this.$router.go(-1)
    },
  },
  data() {
       var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.pwdForm.newPwd2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      rules:{
        oldPwd:[
          {required: true, message:'请输入必要信息', trigger: 'blur'},
        ],
        newPwd1:[
          {required: true, message:'请输入必要信息', trigger: 'blur'},
        ],
        newPwd2:[
          {validator: validatePass2, trigger: 'blur' }
        ]
      },
      pwdForm: {
        oldPwd: "",
        newPwd1: "",
        newPwd2: "",
      },
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
.changepwd-form {
  width: 80%;
  max-width: 800px;
  margin: auto;
}
.el-card {
  margin-bottom: 1rem;
}
.el-button {
  width: 25%;
  margin-right: 2rem;
}

.form-btn {
  justify-content: space-between;
}
</style>